<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-09-11 16:45:05
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-11-07 10:26:56
 * @FilePath: HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="content-box">
    <div class="dataScreen" ref="dataScreenRef">
      <!-- 加载层 -->
      <div class="loading-flex-box" v-show="loading">
        <dv-loading>加载中...</dv-loading>
      </div>
      <!-- 头部 -->
      <Header ref="header"></Header>
      <!-- 表格 -->
      <!-- 中间内容部分 -->
      <div class="screenBox" ref="screenBoxHeight" :style="'height:' + screenBoxHeight + 'px;overflow: hidden;'">
        <div class="leftBox">
          <div ref="leftBoxRef">
            <Title title="数据占比分析"></Title>
            <PieChart ref="pieChartRef"></PieChart>
          </div>
          <Title title="各时段通话峰值"></Title>
          <MultiLineChart :Height="leftBarHeight" ref="multiLineChartRef"></MultiLineChart>
          <Title title="各运营商线路有效通话占比"></Title>
          <BarCharts :Height="leftBarHeight2" ref="barChartsRef"></BarCharts>
        </div>
        <div class="centerBox">
          <div class="overallSaty" ref="overallSatyRef">
            <CardList ref="cardListRef" :schoolList="schoolList"></CardList>
          </div>
          <div class="overallData">
            <div ref="overallDataRef">
              <div class="titleFlex">
                <Title title="学校通话量排名" :opacity="moduleIndex == 1 ? 1 : 0.2" @click.native="moduleCheck(1)"></Title>
                <Title :title="`设备异常统计`" :opacity="moduleIndex == 2 ? 1 : 0.2" @click.native="moduleCheck(2)">
                </Title>
              </div>
              <div class="searchBox">
                <SearchComp>
                  <RowItem label="学校" :span="8" class="paddingr16">
                    <el-select size="small" v-model="personQuery.school" clearable filterable
                      :disabled="!canSelectSchool" @change="search" style="width: 100%;" placeholder="请选择学校">
                      <el-option v-for="item in schoolList" :key="item.school" :label="item.school_name"
                        :value="item.school">
                      </el-option>
                    </el-select>
                  </RowItem>
                  <RowItem label="厂商" :span="8" class="paddinglr16">
                    <el-select size="small" v-model="personQuery.vendor" clearable @change="search" style="width: 100%;"
                      placeholder="请选择厂商">
                      <el-option v-for="item in vendorList" :key="item.id" :label="item.text" :value="item.id">
                      </el-option>
                    </el-select>
                  </RowItem>
                  <RowItem label="运营商" :span="8" class="paddingl16">
                    <el-select size="small" v-model="personQuery.yys" clearable @change="search" style="width: 100%;"
                      placeholder="请选择运营商">
                      <el-option v-for="item in yysList" :key="item.id" :label="item.text" :value="item.id">
                      </el-option>
                    </el-select>
                  </RowItem>
                  <RowItem label="承载" :span="8" class="paddingr16">
                    <el-select size="small" v-model="personQuery.linkType" clearable @change="search"
                      style="width: 100%;" placeholder="请选择承载类型">
                      <el-option v-for="item in linkTypeList" :key="item.id" :label="item.text" :value="item.id">
                      </el-option>
                    </el-select>
                  </RowItem>
                  <RowItem label="日期" :span="8" class="paddinglr16">
                    <el-date-picker size="small" style="width:100%" @change="datePickerChanged" v-model="datevalue"
                      clearable value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </RowItem>
                  <RowItem label="时段" :span="8" class="paddingl16">
                    <div class="row align-items periodTime">
                      <el-time-select size="small" prefix-icon="none" @change="search" style="flex: 1;width:100%"
                        :picker-options="{
        start: '00:00',
        step: '00:01',
        end: '23:59',
        maxTime: personQuery.periodEnd
      }" placeholder="开始时间" v-model="personQuery.periodStart">
                      </el-time-select>
                      <span style="font-size: 12px;padding: 0 5px;">至</span>
                      <el-time-select size="small" prefix-icon="none" @change="search" style="flex: 1;width:100%"
                        :picker-options="{
        start: '00:00',
        step: '00:01',
        end: '23:59',
        minTime: personQuery.periodStart
      }" placeholder="结束时间" v-model="personQuery.periodEnd">
                      </el-time-select>
                    </div>
                  </RowItem>
                </SearchComp>
              </div>
            </div>
            <!-- 学校通话量排名 -->
            <SchoolPhoneCall v-show="moduleIndex == 1" ref="schoolPhoneCallRef" :centerTableHeight="centerTableHeight"
              :schoolList="schoolList" :personQuery="personQuery" @setCanSelectSchoolStatus="setCanSelectSchoolStatus"
              :moduleIndex="moduleIndex">
            </SchoolPhoneCall>
            <!-- 设备异常统计 -->
            <SchoolDeviceAlert v-show="moduleIndex == 2" ref="schoolDeviceAlertRef"
              :centerTableHeight="centerTableHeight" :schoolList="schoolList" :personQuery="personQuery"
              :moduleIndex="moduleIndex" @setCanSelectSchoolStatus="setCanSelectSchoolStatus">
            </SchoolDeviceAlert>
          </div>
        </div>
        <div class="rightBox">
          <div ref="rightBoxRef">
            <Title title="学校每月通话量总数排行"></Title>
            <RankList ref="rightChildOneRef"></RankList>
            <Title title="学校通话清单查询"></Title>
          </div>
          <RightTable :rightTableHeight="rightTableHeight" :schoolList="schoolList" ref="rightChildTwoRef"></RightTable>
        </div>
      </div>
      <!-- 底部 -->
      <Footer ref="footer"></Footer>
    </div>
  </div>
</template>
<script>
import SchoolPhoneCall from './SchoolPhoneCall.vue'
import SchoolDeviceAlert from './SchoolDeviceAlert.vue'
// 柱状图
import BarCharts from './BarCharts.vue'
// 曲线图
import MultiLineChart from './MultiLineChart.vue'
// 饼图
import PieChart from './PieChart.vue'
// 中间卡片
import CardList from './CardList'
// 右边排行版
import RankList from './RankList.vue'
// 右边表格
import RightTable from './RightTable'
// 引入防抖函数
import utils from '../util/debounce.js'
import ScaleBox from 'vue2-scale-box'
import { nextTick } from 'process'
export default {
  components: {
    ScaleBox,
    BarCharts,
    MultiLineChart,
    PieChart,
    CardList,
    RankList,
    RightTable,
    SchoolPhoneCall,
    SchoolDeviceAlert
  },
  data() {
    return {
      loading: false,
      loadNum: 0,
      screenBoxHeight: 0,
      centerTableHeight: 0,// 中间table的高度
      rightTableHeight: 0, // 右边table的高度
      // centerTabHeight: 0, // 中间tab切换的高度
      leftBarHeight: 0, // 左边柱状图的高度
      leftBarHeight2: 0, // 左边柱状图的高度
      value: '',
      options: [],
      listLoading: true, // 加载中

      total: 0,
      total2: 0,
      tableData: [],
      moduleIndex: 1,
      screenTimer: null, // 定时器
      schoolList: [], // 学校列表
      yysList: [], // 运营商列表
      linkTypeList: [], // 承载类型
      vendorList: [], //备厂家列表
      datevalue: [],
      personQuery: {
        yys: '', //运营商编码
        school: '', // 学校id
        vendor: '', //厂商编码
        startDay: '', // 开始日期
        endDay: '',// 结束日期
        periodStart: '', // 开始时间
        periodEnd: '', // 结束时间
        linkType: '',
      },
      canSelectSchool: true, // 是否可以选择学校
    }
  },
  async mounted() {
    var that = this
    await that.getHeight()
    // 获取学校列表
    that.getShoolList()
    // 获取运营商列表
    that.getYysList()
    // 获取通信载体列表
    that.getLinkTypeList()
    // 获取设备厂家列表
    that.getVendorList()
    await that.getRink()
    // 右边结束
    window.addEventListener('resize', function () {
      setTimeout(async () => {
        await that.getHeight()
      }, 100)
    })
    this.screenTimer = setInterval(() => {
      if (this.$refs.cardListRef) {
        this.$refs.cardListRef.getInfo()
      }
      if (this.$refs.barChartsRef) {
        this.$refs.barChartsRef.getInfo()
      }
      if (this.$refs.multiLineChartRef) {
        this.$refs.multiLineChartRef.getInfo(Number(this.$refs.multiLineChartRef.activeName))
      }
      if (this.$refs.pieChartRef) {
        if (Number(this.$refs.pieChartRef.activeName) === 1) {
          this.$refs.pieChartRef.getChartOneData()
        } else {
          this.$refs.pieChartRef.getDeviceList()
        }
      }
    }, 1000 * 10 * 60)
  },
  destroyed() {
    // 使用clearInterval清除定时器
    clearInterval(this.screenTimer)
  },
  methods: {
    // 计算整体布局的各个模块的高度
    async getHeight() {
      this.screenBoxHeight = document.body.clientHeight - this.$refs.header.$el.clientHeight - this.$refs.footer.$el.clientHeight
      // 左边柱状图的高度
      this.leftBarHeight = (this.screenBoxHeight - this.$refs.leftBoxRef.clientHeight - this.$util.nowSizeWidth(20) - (2 * this.$util.nowSizeWidth(49))) * 0.54
      this.leftBarHeight2 = (this.screenBoxHeight - this.$refs.leftBoxRef.clientHeight - this.$util.nowSizeWidth(20) - (2 * this.$util.nowSizeWidth(49))) * 0.46
      // 中间table的高度计算
      this.centerTableHeight = this.screenBoxHeight - this.$refs.overallSatyRef.clientHeight - this.$refs.overallDataRef.clientHeight - this.$util.nowSizeWidth(20)
      // 右边table的高度计算
      this.rightTableHeight = this.screenBoxHeight - this.$refs.rightBoxRef.clientHeight - this.$util.nowSizeWidth(20)
    },
    // 中间内容切换
    async moduleCheck(val) {
      this.moduleIndex = val
      this.$nextTick(() => {
        this.search()
      })
      setTimeout(() => {
        this.getHeight()
      }, 0)
    },
    // 获取学校列表
    async getShoolList() {
      const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/getSchoolList')
      this.schoolList = res
      // this.personQuery.school = this.schoolList.length > 0 ? this.schoolList[0].school : ''
    },
    // 获取运营商列表
    async getYysList() {
      const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/yysList')
      this.yysList = res
    },
    // 获取通信载体列表
    async getLinkTypeList() {
      const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/linkTypeList')
      this.linkTypeList = res
    },
    // 获取设备厂家列表
    async getVendorList() {
      const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/vendorList')
      this.vendorList = res
    },
    datePickerChanged(val) {
      if (val && val.length > 0) {
        this.personQuery.startDay = val[0]
        this.personQuery.endDay = val[1]
      } else {
        this.personQuery.startDay = ''
        this.personQuery.endDay = ''
      }
      this.search()
    },
    search: utils.debounce(function () {
      if (Number(this.moduleIndex) === 1) {
        // 学校通话量排名
        if (Number(this.$refs.schoolPhoneCallRef.activeName) === 1) {
          this.$refs.schoolPhoneCallRef.getTerminals()
        } else {
          this.$refs.schoolPhoneCallRef.getChartData()
        }
      } else {
        // 设备异常统计
        this.$refs.schoolDeviceAlertRef.getDeviceAlertList()
      }
    }, 500),
    async getRink() {
      await this.$refs.rightChildOneRef.getList()
    },
    setCanSelectSchoolStatus(bol) {
      this.canSelectSchool = bol
    }
  }
}
</script>
<style lang="less" scoped>
.periodTime /deep/ .el-input--prefix .el-input__inner {
  padding-left: 10px;
  padding-right: 10px;
}
</style>
